<template>
	<navigatorComp title="马上咨询" bgcColor="#F6F6F6" fontColor="#0E0E0E"></navigatorComp>
	<view class="content">
		<view class="consult_box">
			<view class="consult_title">{{dataObj.title}}</view>
			<view class="consult_price">¥{{dataObj.price}}</view>
		</view>
		<view class="consult_box">
			<view class="consult_form_title">信息填写:</view>
			<view class="consult_form">
				<up-form labelPosition="left" :model="formData" ref="form1" label-width="150rpx">
					<up-form-item label="区域" prop="name" borderBottom ref="item1" v-if="dataObj.serviceType==2">
						<pickerAddress @change="changeAddress">
							<view class="display_flex">
								<view :class="['placeHolder', formData.address && 'value']">
									{{ formData.address || '请选择区域' }}
								</view>
								<image class="arrow_right" src="http://112.124.50.179:8888/imgs/home/arrow_right.png" mode=""></image>
							</view>
						</pickerAddress>
					</up-form-item>
					<up-form-item label="联系人" prop="name" borderBottom ref="item1">
						<up-input v-model="formData.contacter" border="none" inputAlign="right" placeholder="请输入联系人"
							maxlength="5"></up-input>
					</up-form-item>
					<up-form-item label="联系电话" prop="phone" borderBottom ref="item1">
						<up-input type="number" v-model="formData.phone" border="none" inputAlign="right"
							placeholder="请输入手机号" maxlength="11"></up-input>
					</up-form-item>
					<up-form-item label="微信(选填)" prop="wechat" borderBottom ref="item1">
						<up-input v-model="formData.wechat" border="none" inputAlign="right"
							placeholder="请输入微信号"></up-input>
					</up-form-item>
				</up-form>
			</view>
			<view class="display_flex" style="padding-bottom: 16rpx">
				<myButton bgcColor="#F3E0BB" name="提交" width="400rpx" @clickBtn="handleSubmit"></myButton>
			</view>
		</view>
		<view class="consult_box">
			<view class="consult_tip">
				<view style="font-size: 32rpx; margin-bottom: 16rpx">温馨提示</view>
				<view>
					*目前的服务只针对于广东地区
					<br />
					请输入您的有效联系方式，提交咨询信息后，我们的客服人员将在24小时内与您取得联系，了解您的具体需求。
					<br />
					天堂墓园属于线下选择墓地服务，我们理解这项服务的重要性，因此从咨询到服务执行的每一个环节，都将由经验丰富的工作人员负责，确保服务的质量与细节都能达到您的期望。我们的目标是为您所爱之人提供一个宁静、整洁且充满尊重的安息之所。
					<br />
					请您放心选择我们的天堂墓园服务，我们将全力以赴，以最真诚的态度和专业的精神，满足您的所有需求。
				</view>
				<!-- <view>
					*目前的服务只针对于广东地区
					<br />
					请输入您的有效联系方式，提交咨询信息后，我们的客服人员将在24小时内与您取得联系。
					<br />
					我们的墓地护理服务属于线下实际操作，需要与客服详细沟通您的具体需求，以确认服务内容。在整个服务过程中，我们将提供录像，确保您能够远程监督，让您感到安心。请您放心选择我们的服务。
				</view> -->
			</view>
		</view>
	</view>

	<!-- 客服 -->
	<customerService></customerService>
</template>

<script setup>
	import navigatorComp from '/components/navigator/index.vue';
	import myButton from '/components/button/index.vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	import _ from 'lodash';
	import customerService from '/components/customerService/index.vue';
	import pickerAddress from '/components/picker/addressPicker.vue';
	import ServiceApi from '@/API/service/index.js';
	const serviceApi = new ServiceApi();
	onLoad((o) => {
		dataObj.value = JSON.parse(o.dataObj)
		formData.serviceId = dataObj.value.id
	})
	const dataObj = ref({})
	const formData = reactive({
		serviceId: '',
		address: '',
		contacter: '',
		phone: '',
		wechat: '',
	});
	/**
	 * 校验表单数据
	 */
	const validate = () => {
		if (!formData.address && dataObj.value.serviceType == 2) {
			uni.showToast({
				title: '请选择区域',
				icon: 'none'
			});
			return false;
		} else if (!formData.contacter) {
			uni.showToast({
				title: '请输入联系人',
				icon: 'none'
			});
			return false;
		} else if (formData.phone.length != 11) {
			uni.showToast({
				title: '请正确的手机号',
				icon: 'none'
			});
			return false;
		}
		return true;
	};

	const handleSubmit = _.throttle(function() {
		submit();
	}, 2000);

	/**
	 * 提交表单
	 */
	const submit = () => {
		if (!validate()) {
			return;
		}
		if (dataObj.value.serviceType == 1) {
			formData.address = '无'
		}
		serviceApi.addServiceQueryApi(formData)
			.then((res) => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
				setTimeout(() => {
					uni.redirectTo({
						url: '/subPages/service/result?title=' + dataObj.value.title
					});
				})
			}).catch(() => {});
	};

	/**
	 * 选择地址
	 */
	const changeAddress = (e) => {
		if (e.data) {
			formData.address = e.data.join('');
		}
	};

	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.content {
		padding: 0 0 150rpx 0;
		overflow: scroll;
	}

	.consult_box {
		margin: 24rpx 24rpx 16rpx 24rpx;
		padding: 32rpx;
		background: #ffffff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.consult_title {
		font-weight: 500;
		font-size: 36rpx;
		color: #0e0e0e;
		line-height: 42rpx;
		margin-bottom: 16rpx;
	}

	.consult_price {
		font-weight: 500;
		font-size: 32rpx;
		color: #ff4c5a;
		line-height: 38rpx;
		letter-spacing: 1px;
	}

	.consult_form_title {
		font-weight: 500;
		font-size: 32rpx;
		color: #0e0e0e;
		line-height: 38rpx;
		margin-bottom: 12rpx;
	}

	.consult_form {
		margin-bottom: 44rpx;

		::v-deep .u-form-item__body__right__content__slot {
			display: flex !important;
			align-items: center !important;
			justify-content: flex-end !important;
		}

		::v-deep .u-form-item__body__left__content__label {
			font-size: 28rpx !important;
			font-weight: 400 !important;
			color: #0e0e0e !important;
		}

		::v-deep .uni-input-placeholder {
			font-size: 28rpx !important;
			color: #999999 !important;
		}

		::v-deep .uni-input-input {
			font-size: 28rpx !important;
			color: #0e0e0e !important;
		}

		.placeHolder {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			line-height: 33rpx;
			text-align: right;
		}

		.value {
			color: #0e0e0e;
		}

		.arrow_right {
			width: 40rpx;
			height: 40rpx;
			margin-right: -10rpx;
		}
	}

	.consult_tip {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 50rpx;
	}
</style>